<!DOCTYPE HTML>
<html>
<head>
  <!--  <link rel="stylesheet" type="text/css" href="guacamole.css"/>-->
  <title>IndSvr rd</title>
</head>

<style>
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }

  body {
    position: relative;
  }

  #display {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
  }

</style>

<body id="display">
<!-- Display -->
<!--<div></div>-->

<!-- Guacamole JavaScript API -->
<script type="text/javascript"
        src="guacamole-common-js/all.min.js"></script>

<!-- Init -->
<script type="text/javascript"> /* <![CDATA[ */

// Get display div from document

var display = document.getElementById("display");

// Instantiate client, using an HTTP tunnel for communications.
// tunnel
// 192.168.6.14:8080/tunnel
// var guac = new Guacamole.Client(
//   new Guacamole.HTTPTunnel("tunnel")
// );

var pixelRatio = window.devicePixelRatio;
// var pixelRatio = 1;

let clientHeight = document.body.clientHeight * pixelRatio;
let clientWidth = document.body.clientWidth * pixelRatio;


const guac = new Guacamole.Client(
  new Guacamole.WebSocketTunnel("api/bl/webSocket?height=" + clientHeight + "&width=" + clientWidth + "&")
);


// Add client to display div
let element = guac.getDisplay().getElement();
// 也可单独设置宽/高缩放（baifenbi）
element.style.transform = 'scale(' + 1 / pixelRatio + ')';
// 结合 transform-origin（默认值为 center，可改为 top left 等）
element.style.transformOrigin = 'top left'; // 从左上角开始缩放


display.appendChild(element);

// Error handler
guac.onerror = function (error) {
  alert(error);
  console.log(error)
};
// guac.createAudioStream()
// Connect
guac.connect()


// Disconnect on close
window.onunload = function () {
  guac.disconnect();
}

// Mouse
var mouse = new Guacamole.Mouse(element);

mouse.onmousedown = function (mouseState) {
  guac.sendMouseState(mouseState);
};
mouse.onmouseup = function (mouseState) {
  guac.sendMouseState(mouseState);
};
mouse.onmousemove = function (mouseState) {
  mouseState.x = mouseState.x * pixelRatio;
  mouseState.y = mouseState.y * pixelRatio;
  guac.sendMouseState(mouseState);
};

const touch = new Guacamole.Mouse.Touchpad(element); // or Guacamole.Touchscreen

touch.onmousedown = touch.onmousemove = touch.onmouseup = function (state) {
  client.sendMouseState(state);
};

// Keyboard
var keyboard = new Guacamole.Keyboard(document);

keyboard.onkeydown = function (keysym) {
  guac.sendKeyEvent(1, keysym);
};

keyboard.onkeyup = function (keysym) {
  guac.sendKeyEvent(0, keysym);
};


guac.onclipboard = function (stream, mimetype) {
  if (/^text\//.exec(mimetype)) {
    let reader = new Guacamole.StringReader(stream);
    let data = '';
    reader.ontext = function textReceived(text) {
      data += text;
    };
    reader.onend = async () => {

       alert(data)

      // message.success('您选择的内容已复制到您的粘贴板中，在右侧的输入框中可同时查看到。');
    };
  } else {
    let reader = new Guacamole.BlobReader(stream, mimetype);
    reader.onend = () => {

       alert(reader.getBlob())

    }
  }
};

window.addEventListener('focus', (e) => {
  // if (navigator.clipboard) {
  //   try {
  //     navigator.clipboard.readText().then((text) => {
  //       sendClipboard({
  //         'data': text,
  //         'type': 'text/plain'
  //       });
  //     })
  //   } catch (e) {
  //     console.error('复制剪贴板失败', e);
  //   }
  // }
  sendClipboard({
    'data': "123132",
    'type': 'text/plain'
  });
});
function sendClipboard (data) {

  const stream = guac.createClipboardStream(data.type);
  if (typeof data.data === 'string') {
    let writer = new Guacamole.StringWriter(stream);
    writer.sendText(data.data);
    writer.sendEnd();
  } else {
    let writer = new Guacamole.BlobWriter(stream);
    writer.oncomplete = function clipboardSent() {
      writer.sendEnd();
    };
    writer.sendBlob(data.data);
  }

  if (data.data && data.data.length > 0) {
    // message.info('您输入的内容已复制到远程服务器上');
  }
}


//获取DPI
function js_getDPI() {
  var arrDPI = new Array();
  if ( window.screen.deviceXDPI != undefined ) {
    arrDPI[0] = window.screen.deviceXDPI;
    arrDPI[1] = window.screen.deviceYDPI;
  }
  else {
    var tmpNode = document.createElement( "DIV" );
    tmpNode.style.cssText = "width:1in;height:1in;position:absolute;left:0px;top:0px;z-index:99;visibility:hidden";
    document.body.appendChild( tmpNode );
    arrDPI[0] = parseInt( tmpNode.offsetWidth );
    arrDPI[1] = parseInt( tmpNode.offsetHeight );
    tmpNode.parentNode.removeChild( tmpNode );
  }
  return arrDPI;
}

/* ]]> */ </script>

</body>

</html>
